<!DOCTYPE html>
<html lang="<%= I18n.locale %>" data-bs-theme="auto">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">

    <%# Bootstrap Color Modes
      "It is suggested to include the JavaScript at the top of your page
      to reduce potential screen flickering during reloading of your site."
      https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript
    %>
    <script nonce="<%= content_security_policy_nonce %>">
      let theme = localStorage.getItem('good_job-theme');
      if (!["light", "dark"].includes(theme)) {
        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
      }
      document.documentElement.setAttribute('data-bs-theme', theme);
    </script>

    <%# Do not use asset tag helpers to avoid paths being overriden by config.asset_host %>
    <%= tag.link rel: "stylesheet", href: frontend_static_path(:bootstrap, format: :css, locale: nil), nonce: content_security_policy_nonce %>
    <%= tag.link rel: "stylesheet", href: frontend_static_path(:style, format: :css, locale: nil), nonce: content_security_policy_nonce %>
    <%= tag.script "", src: frontend_static_path(:bootstrap, format: :js, locale: nil), nonce: content_security_policy_nonce %>
    <%= tag.script "", src: frontend_static_path(:chartjs, format: :js, locale: nil), nonce: content_security_policy_nonce %>
    <%= tag.script "", src: frontend_static_path(:rails_ujs, format: :js, locale: nil), nonce: content_security_policy_nonce %>
    <%= tag.script "", src: frontend_static_path(:es_module_shims, format: :js, locale: nil), async: true, nonce: content_security_policy_nonce %>
    <% importmaps = GoodJob::FrontendsController.js_modules.keys.index_with { |module_name| frontend_module_path(module_name, format: :js, locale: nil) } %>
    <%= tag.script({ imports: importmaps }.to_json.html_safe, type: "importmap", nonce: content_security_policy_nonce) %>
    <%= tag.script "", type: "module", nonce: content_security_policy_nonce do %> import "application"; <% end %>

    <title>Good Job Dashboard</title>
    <%= tag.link rel: "icon", href: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 100 100"><text y=".90em" font-size="90">👍</text></svg>' %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= render "good_job/custom_head" %>
  </head>
  <body>
    <div class="d-flex flex-column min-vh-100">
      <%= render "good_job/shared/navbar" %>
      <%= render "good_job/shared/secondary_navbar" %>
      <div class="container-fluid flex-grow-1 relative">
        <%= render "good_job/shared/alert" %>
        <%= yield %>
      </div>
      <%= render "good_job/shared/footer" %>
    </div>
  </body>
</html>
